<template>
    <div class="store-fix-container">
        <div class="fix-header">
            <div class="search">
                <div class="fix-img">
                    <image :src="imgPath('search.png')" class="img"></image>
                </div>
                <input type="text" class="fix-search" placeholder="请输入搜索内容" v-model="searchText"  @return="show($event)" return-key-type="search" >
            </div>
        </div>
        <div class="fix-content">
            <div class="fix-left">
                <div class="left-list">
                    <div class='list-item beforepress'  v-for="(item) in personList" :key="item.type"  @click="typeTouchStart(item)" :class="[idx ==item.type ?  'afterActive': 'beforepress']">
                        <div class="list-wrap">
                            <text class="list-text"  :class="[idx ==item.type ?  'afterpress': 'beforepress']">{{item.name}}</text>
                        </div>
                    </div>
                    <div class="list-item" v-for="(item) in otherList" :key="item.id" @click="switchNav(item)" :class="[index1 == item.id ?  'afterActive': '']">
                        <div class="list-wrap" >
                            <text class="list-text" :class="[(index1 == item.id) && item.id !== 1 ?  'afterpress': 'beforepress']">{{item.value}}</text>
                            <image class="list-img" v-if="item.treeList && item.treeList.length > 0 && item.id == 1" :src="imgPath( (index1 == item.id && open) ? 'choice_11.png': 'choice_1.png' )"></image>
                        </div>
                        <div v-if="open && item.treeList && item.treeList.length > 0 && item.id == 1" style="width: 162px;" class="otherWrap" v-for="item1 in item.treeList" :key="item1.id"  @click="childrenClick(item1)" :class="[otherIndex == item1.id ?  'afterActive': 'beforepress']">
                            <text class="list-text otherText" :class="[otherIndex == item1.id ? 'afterpress': 'beforepress']">{{item1.value}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fix-right">
                <image :src="imgPath('banner.png')" class="bannerImg"></image>
                <scroller>
                    <div class="right-mainCon" v-if="idx==10 && display">
                        <div class="mainCo-item">
                            <div class="mainCon-header">
                                <text class="tit1">最新</text>
                                <text class="tit2" @click="pushdetail">查看更多>></text>
                            </div>
                            <div class="mainCon-img">
                                <div class="mainItem" v-if="recommendList && recommendList.length > 0" @click="pushStoreDeatil(item)" v-for="(item) in recommendList" :key="item.id">
                                    <image class="storeImg" :src="item.topPicture"></image>
                                    <div class="mainTitle">
                                        <text class="introduce">{{item.goodsname}}</text>
                                        <text class="price">{{item.price}}</text>
                                    </div>
                                    <div class="sanjiao" v-if="item.discount">
                                        <text class="discount">特惠</text>
                                        <text class="discount">{{item.discount}}</text>
                                        <text class="discount">折</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mainCo-item">
                            <div class="mainCon-header" >
                                <text class="tit1">畅销</text>
                                <text class="tit2" @click="pushdetail">查看更多>></text>
                            </div>
                            <div class="mainCon-img">
                                <div class="mainItem"  v-if="recommendList1 && recommendList1.length > 0" @click="pushStoreDeatil(item)" v-for="item in recommendList1" :key="item.id" >
                                    <image class="storeImg" :src="item.topPicture"></image>
                                    <div class="mainTitle">
                                        <text class="introduce">{{item.goodsname}}</text>
                                    </div>
                                    <div class="sanjiao" v-if="item.discount">
                                        <text class="discount">特惠</text>
                                        <text class="discount">{{item.discount}}</text>
                                        <text class="discount">折</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-mainCon" v-if="idx==9 && display">
                        <div class="mainCo-item">
                            <div class="mainCon-header">
                                <text class="tit1">优质精选</text>
                                <text class="tit2" @click="pushdetail">查看更多>></text>
                            </div>
                            <div class="mainCon-img">
                                <div class="mainItem"  v-if="recommendList2 && recommendList2.length > 0" @click="pushStoreDeatil(item)" v-for="item in recommendList2" :key="item.id" >
                                    <image class="storeImg" :src="item.topPicture"></image>
                                    <div class="mainTitle">
                                        <text class="introduce">{{item.goodsname}}</text>
                                        <text class="price">{{item.price}}</text>
                                    </div>
                                    <div class="sanjiao" v-if="item.discount">
                                        <text class="discount">特惠</text>
                                        <text class="discount">{{item.discount}}</text>
                                        <text class="discount">折</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mainCo-item">
                            <div class="mainCon-header" >
                                <text class="tit1">特价报销</text>
                                <text class="tit2" @click="pushdetail">查看更多>></text>
                            </div>
                            <div class="mainCon-img">
                                <div class="mainItem"  v-if="recommendList3 && recommendList3.length > 0" @click="pushStoreDeatil(item)" v-for="item in recommendList3" :key="item.id" >
                                    <image class="storeImg" :src="item.topPicture"></image>
                                    <div class="mainTitle">
                                        <text class="introduce">{{item.goodsname}}</text>
                                        <text class="price">{{item.price}}</text>
                                    </div>
                                    <div class="sanjiao" v-if="item.discount">
                                        <text class="discount">特惠</text>
                                        <text class="discount">{{item.discount}}</text>
                                        <text class="discount">折</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-mainCon" v-if="!display">
                        <div class="mainCo-item" v-for="(item) in titleList" :key="item.id" >
                            <div class="mainCon-header"  >
                                <text class="tit1">{{item.value}}</text>
                                <text class="tit2" @click="detail(item)">查看更多>></text>
                            </div>
                            <div class="mainCon-img" v-if="item.goods">
                                <div class="mainItem" @click="pushStoreDeatil(item1)" v-for="item1 in item.goods.records" :key="item1.id"  v-if="(item.parentId !== 7) || (item.parentId === 7 && item1.type === '24')">
                                    <image class="storeImg" :src="item1.topPicture"></image>
                                    <div class="mainTitle">
                                        <text class="introduce">{{item1.goodsName}}</text>
                                        <text class="price" >{{item1.price}}</text>
                                    </div>
                                    <div class="sanjiao" v-if="item1.discount">
                                        <text class="discount">特惠</text>
                                        <text class="discount">{{item1.discount}}</text>
                                        <text class="discount">折</text>
                                    </div>
                                </div>
                                <div class="mainItem" @click="pushStoreDeatil(item1)" v-for="item1 in item.goods.records" :key="item1.id" v-if="item.parentId === 7 && item1.type !== '24'">
                                    <image class="storeImg" :src="item1.topPicture"></image>
                                    <div class="mainTitle">
                                        <text class="introduce">{{item1.goodsName}}</text>
                                        <text class="price" >{{item1.address}}</text>
                                    </div>
                                    <div class="sanjiao" v-if="item1.discount">
                                        <text class="discount">特惠</text>
                                        <text class="discount">{{item1.discount}}</text>
                                        <text class="discount">折</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroller>
            </div>
        </div>
        <navBottom></navBottom>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>
<script>
import navBottom from '@/components/navBottom'
import { storeIndex, storeOtherType, shopGoodsList } from '@/api/store'
import { WxcLoading } from 'weex-ui'
// const modal = weex.requireModule('modal')
export default {
  name: 'store',
  data () {
    return {
      idx: 10,
      personList: [{name: '推荐专区', type: 10}, { name: '活动专区 ', type: 9 }], // 企业类型列表
      active: false,
      buliao: false,
      extraColor: false,
      open: false, // 是否展开
      Urlpath: true, // 图片路径
      pageNo: 1,
      pageSize: 2,
      price: true,
      address: true,
      recommendList: [],
      recommendList1: [],
      recommendList2: [],
      recommendList3: [],
      otherList: {}, // 其他列表专区
      type: '',
      titleList: [],
      // recordList: [],
      display: true, // 控制推荐专区活动专区与其他  在右边标题的隐现
      // block: false,
      idList: [],
      index1: -1,
      otherIndex: -1,
      searchText: '', // 搜索绑定的字段
      needMask: true, // 显示蒙版
      loadingShow: true // loading
    }
  },
  mounted: function () {
    const that = this
    that.loadingShow = true
    that.$api.get(storeIndex + '/' + that.pageNo + '/' + that.pageSize, {}, function (res) {
      that.recommendList = res.data.newestList.records
      that.recommendList1 = res.data.bestSellingList.records
      that.recommendList2 = res.data.selectedList.records
      that.recommendList3 = res.data.specialOfferList.records
      that.loadingShow = false
    }, function () {
      that.loadingShow = false
    })
    that.$api.get(storeOtherType + '/' + '0', {}, function (res) {
      that.otherList = res.data
      that.loadingShow = false
    }, function () {
      that.loadingShow = false
    })
  },
  methods: {
    typeTouchStart (item) { // 点击效果
      const that = this
      that.display = true
      // that.block = false
      that.idx = item.type
      that.index1 = -1
      that.otherIndex = -1
    },
    switchNav (item) {
      const that = this
      that.index1 = item.id
      that.idx = -1
      // that.block = true
      that.titleList = item.treeList
      // that.recordList = []
      // console.log(that.titleList)
      if (item.id === 1) {
        // that.block = false
        that.open = !that.open
        return
      } else {
        that.open = false
      }
      for (let i = 0; i < item.treeList.length; i++) {
        let idList = item.treeList[i].id
        let params = {
          type: idList,
          pageNo: that.pageNo,
          pageSize: that.pageSize
        }
        that.loadingShow = true
        that.$api.get(shopGoodsList, params, function (res) {
          that.loadingShow = false
          if (res.data.records.length > 0) {
            that.titleList[i].goods = res.data
          }
        }, function () {
          that.loadingShow = false
        })
      }
    },
    childrenClick (item) {
      // console.log(3333)
      const that = this
      that.titleList = item.treeList
      that.idx = -1
      that.index1 = -1
      that.display = false
      that.block = true
      // console.log(item.id)
      that.otherIndex = item.id
      for (let i = 0; i < item.treeList.length; i++) {
        const idList = item.treeList[i].id
        let params = {
          type: idList,
          pageNo: that.pageNo,
          pageSize: that.pageSize
        }
        that.loadingShow = true
        that.$api.get(shopGoodsList, params, function (res) {
          that.titleList[i].goods = res.data
          that.loadingShow = false
        }, function () {
          that.loadingShow = false
        })
      }
    },
    detail (item) {
      this.$router.push({path: 'store/storeType', query: {type: item.id, searchText: '', value: item.value, item: item}})
    },
    // 这个是活动专区和推荐专区查看更多
    pushdetail () {
      this.$router.push({path: 'store/storeType', query: {type: '', item: '', searchText: ''}})
    },
    pushStoreAdd () {
      this.$router.push('store/storeAddress')
    },
    pushStoreDeatil (item) {
      this.$router.push({path: 'store/storeDetail', query: {goodsId: item.id}})
      // this.$router.push('store/storeDetail')
    },
    pushMyAddress () {
      this.$router.push('mine/myAddress')
    },
    pushToOrder () {
      this.$router.push('mine/cancel')
    },
    // 手机键盘确认事件
    show (ev) {
      const that = this
      that.$router.push({path: '/store/storeType', query: {searchText: that.searchText, item: '', type: ''}})
    }
  },
  components: {
    navBottom,
    WxcLoading
  }
}
</script>

<style scoped>
    .sanjiao{
        position: absolute;
        top:15px;
        right:0;
        padding-left:15px;
        padding-right:15px;
        height:40px;

        background-color:rgb(255,15,55);
        flex-direction: row;
    }
    .discount{
        font-size: 21px;
        color:#fff;
        line-height:40px;
    }
    .fix-header {
        height: 88px;
        padding-top: 14px;
        padding-bottom: 14px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        align-items: center;
        position: relative;
    }

    .search {
        align-items: center;
        display: flex;
        flex-direction: row;
        width: 702px;
        height: 60px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #fff;
    }

    .fix-img {
        width: 62px;
        height: 60px;
        align-items: center;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .img {
        width: 28px;
        height: 28px;
        margin-top: 15px;
    }

    .fix-search {
        height: 60px;
        width: 640px;
        border: none;
        background-color: #fff;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 24px;
        color: #333;
    }

    .fix-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 89px;
        top: 88px;
        background-color: #00B4FF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .fix-left {
        width: 162px;
        background-color: rgb(245, 245, 245);
    }

    .fix-right {
        width: 588px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        background-color: #fff;
    }

    .list-item {
        min-height: 88px;
        width: 162px;
        font-size: 26px;
        color: rgb(102, 102, 102);
        flex-direction: row;
        flex-wrap:wrap;
        /*padding-bottom:28px;*/
    }

    .bannerImg {
        width: 540px;
        height: 200px;
        margin-bottom: 20px;
    }

    .list-text {
        padding-left:25px;
        font-size: 26px;
        height:35px;
        color: rgb(102, 102, 102);
    }
    .con-item{
       width: 162px;
        height: 40px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*background-color: ;*/
    }
    .list-img {
        width: 19px;
        height: 13px;
        margin-left: 10px;
        margin-top: 15px;
    }

    .right-mainCon {
        margin-top: 24px;
        margin-bottom: 62px;
    }

    .mainCon-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .tit1 {
        font-size: 24px;
        font-weight: bold;
        color: rgb(38, 38, 38);
    }

    .tit2 {
        font-size: 24px;
        color: rgb(255, 15, 55);
    }

    .mainCon-img {
        margin-top: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

    .mainItem {
        width: 258px;
        /*height:100px;*/
        border-width: 1px;
        border-style: solid;
        border-color: rgb(235, 235, 235);
        background-color: #ffF;
        border-radius: 20px;
        flex-direction: column;
    }

    .storeImg {
        width: 258px;
        height: 258px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235, 235, 235);
        border-radius: 20px;
    }

    .mainTitle {
        padding-top: 24px;
        padding-left: 9px;
        padding-right: 7px;
        padding-bottom: 26px;
    }

    .introduce {
        font-size: 26px;
        width: 240px;
        text-overflow: ellipsis;
        /*overflow: hidden;*/
        color: rgb(70, 70, 70);
        lines: 1;
    }

    .price {
        font-size: 28px;
        color: rgb(254, 203, 1);
        margin-top: 14px;
    }
    .mainCo-item{
        margin-bottom: 32px;
    }

    .beforepress{
        border-left-style: solid;
        border-left-color:red;
        border-left-width: 0px;
    }
    .otherWrap{
       background-color: rgba(206,206,206,0.8);
        width: 162px;
        height: 88px;
        padding-top: 25px;
        padding-bottom: 28px;
    }
    .afterpress {
        background-color: #fff;
        border-left-style: solid;
        border-left-color:red;
        border-left-width: 4px;
        font-weight: bold;
        font-size: 30px;
    }
    .afterActive{
        background-color: #fff;
    }
    .list-wrap{
        height: 88px;
        width: 162px;
        padding-top: 25px;
        padding-bottom: 28px;
        display: flex;
        flex-direction: row;
    }
    .afterother{
        background-color: #fff;
    }
    .aftermain{
        background-color: rgb(255,255,255);
    }
    /*.afteractive{*/
        /*border-left-style: solid;*/
        /*border-left-color:red;*/
        /*border-left-width: 4px;*/
        /*font-weight: bold;*/
        /*font-size:30px;*/
    /*}*/
    /*.beforeactive{*/
        /*font-weight: normal;*/
       /*border: none;*/
    /*}*/
    /*.extraCon{*/
        /*width: 162px;*/
        /*height: 300px;*/
        /*padding-top:28px;*/
    /*}*/
    /*.beforeacolor{*/
        /*background-color: rgb(206,206,206);*/
        /*width: 162px;*/
        /*min-height: 88px;*/
        /*padding-top:24px;*/
        /*margin-top:0;*/
    /*}*/
</style>
